<template>
  <div class="app-container">
        <!-- 常用项管理页面 -->
        <el-row type="flex" justify="left">
          <el-col :span="14" class="searchHeader">
                <h5>常用项类别</h5>
                <el-select v-model="value" placeholder="请选择"  class="header_select">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
                <el-button type="primary">增加常用项</el-button>
          </el-col>       
        </el-row>
            <el-table
          :data="tableData"
          style="width: 100%;margin-top: 3%;">
          <el-table-column
            prop="name"
            label="项目名"
            >
          </el-table-column>
          <el-table-column
          align="center"
            prop="price"
            label="项目单价"
            width="120">
          </el-table-column>
          <el-table-column  align="center"
            prop="orderNo"
            label="项目编码"
           
            >
          </el-table-column>
          <el-table-column  
            label="">
            <template slot-scope="scope">
                <el-button type="text"  @click="removeInfo(scope.$index)">删除</el-button>         
            </template>
          </el-table-column>
        </el-table>
    </div>
</template>

<script>




export default{
  name: 'DirectivePermission',

  data() {
    return {
      key: 1, // 为了能每次切换权限的时候重新初始化指令
      options: [{
          value:'1',
          label: '检查'
        }, {
          value:'2',
          label: '诊断'
        }, {
          value:'3',
          label: '处置'
        }, {
          value:'4',
          label: '检验'
        }, {
          value:'5',
          label: '成药'
        }, {
          value:'6',
          label: '草药'
        }
      ],
        value: '5',
        tableData: [{
            price: '7.01',
            name: '氟康唑氯化钠',
            orderNo: '86979474000209'
          },
          {
            price: '25.16',
            name: '50%葡萄糖注',
            orderNo: '86979474000209'
          },
          {
            price: '40.62',
            name: '盐酸特比萘芬',
            orderNo: '86979474000208'
          },
          {
            price: '0.84',
            name: '帕拉米韦氯化钠注射液 (力纬)',
            orderNo: '86979474000208'
          },
        ]

    }
  },
  
  methods: {
    removeInfo(index) {
      console.log(index);
      this.$confirm("此操作将永久删除该条记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
        this.tableData.splice(index, 1);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      
    },
  }
}
</script>

<style scoped>
h5{
  display: inline;
  margin-left: 3%;
}
.el-select{
  margin: 0 10px;
}
.header_select{
  width:150px
}
</style>

